
<template>
    <div v-if="!pending" class="w-4/5 ml-[10%]">
        <h1 class="mt-8 font-bold">网易官方榜</h1>
        <div v-for="item in data?.data.splice(0, 4) " class="flex bg-gray-50 mt-8">
            <img :src="item.coverImgUrl.toString()" alt="封面" class="h-32 w-32">
            <div v-if="item.tracks" class="w-full">
                <p v-for="items, index in item.tracks"
                    class="bg-gray-50 odd:bg-slate-100 hover:bg-gray-200 flex justify-between leading-8 px-4 rounded-sm text-sm text-gray-500">
                    <span>{{ index + 1 }}&emsp;{{ items.first }}</span>
                    <span>{{ items.second }}</span>
                </p>
                <a class="leading-8 float-right text-gray-400 text-sm mr-4">查看全部</a>
            </div>
        </div>
        <h1 class="mt-8 font-bold">全球榜</h1>
        <div v-for="item in data?.data.splice(5)">
            <!-- <img :src="`${item.coverImgUrl}`" alt=""> -->
        </div>
    </div>
</template>
<script setup lang="ts">
import { watch } from 'vue';
const router = useRouter();
interface Prop {
    code: String,
    message: String,
    data: {
        tracks?: {
            first: string,
            second: string,
        }[],
        coverImgUrl: String,
        name: String,
        id: String
    }[]
}
const { data, pending, refresh } = await useAsyncData<Prop>('albumInfo', () => $fetch('/api/leaderBorad/getList'))
watch(data, async (newvalue, oldvalue) => {
    if (newvalue != oldvalue) {
        const { data, pending, refresh } = await useAsyncData<Prop>('albumInfo', () => $fetch('/api/leaderBorad/getList'))
        console.log(data.value?.data);
        refresh();
    }
});
</script>
<style lang="less"></style>
